import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import service from '../api';

interface Props {}

function EcharFour(props:Props) { 

    var [ xAxis,setXAxis] = useState([])
    var [ yData,setYData] = useState([])
    var myChart:any = null

    var request_data = async () =>{
        var res = await service.data.data_simpleData()
        var xAxis = res.data.data.map((item:any)=>item.x)
        var yData = res.data.data.map((item:any)=>item.val)
        setXAxis(xAxis)
        setYData(yData)
        // 绘图
        myChart.setOption({
          title: {
            text: '嗨购年注册用户量',
            left:'center',
            top:20
          },
          tooltip: {},
          legend: {
            top:20,
            orient: 'vertical',
            left:10,
            data: [xAxis[0], xAxis[1], xAxis[2], xAxis[3], xAxis[4],xAxis[5],xAxis[6]]
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: yData[0],
                  name: xAxis[0]
                },
                {
                  value: yData[1],
                  name: xAxis[1]
                },
                {
                  value: yData[2],
                  name: xAxis[2]
                },
                {
                  value: yData[3],
                  name: xAxis[3]
                },
                {
                  value: yData[4],
                  name: xAxis[4]
                },
                {
                  value: yData[5],
                  name: xAxis[5]
                },
                {
                  value: yData[6],
                  name: xAxis[6]
                }
              ],
              roseType: 'area'
            }
          ]
          
      });
    }

    // 实例化echarts 
    useEffect(()=>{

        // 请求数据
        request_data()
        // 基于准备好的dom,初始化echarts实例
        myChart =  echarts.init(document.getElementById('four') || document.body);
        // 绘制图表
    },[])

    return (
        <div className='echarThree'>
            <div id='four' style={{width:680,height:380}}></div>
        </div>
    );
}

export default EcharFour;